<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { list, select, title, init } from './data'
import { imagePath } from '@/libs/file-utils'
// import { backToMain } from '@/libs/common'

const img_bg = imagePath('quiz/mbti/choose/bg.jpg')
const btn_bg = [
  imagePath('quiz/mbti/choose/btn-bg-1.png'),
  imagePath('quiz/mbti/choose/btn-bg-2.png'),
  imagePath('quiz/mbti/choose/btn-bg-3.png')
]
const tips_bg = imagePath('quiz/mbti/choose/tips-bg.png')

init()
</script>

<template>
  <PageWrapper name="quiz-mbti-choose">
    <div
      class="mbti-choose"
      :style="{ backgroundImage: img_bg }"
    >
      <!-- <div
        class="skip"
        @click="backToMain"
      >跳过</div> -->

      <text class="title">{{ title }}</text>

      <div
        v-for="(item, index) in list"
        :key="index"
        class="type"
        :style="{
          backgroundImage: btn_bg[index % 3],
          color: index % 3 === 2 ? '#fff' : '#210662'
        }"
        @click="select(item.key)"
      >{{ item.value }}</div>

      <div
        class="tips"
        :style="{ backgroundImage: tips_bg }"
      >
        <div style="font-weight: bold;line-height: 40rpx;">2500 万 + 用户实测盖章！MBTI 题库准到犯规✨</div>
        <div><span class="val">28</span>题速通题库：<span class="val">68%</span>准确率，摸鱼 5 分钟 get 社交人设</div>
        <div><span class="val">93</span>题进阶题库：<span class="val">76%</span>准确率，解锁情感 / 决策核心逻辑</div>
        <div><span class="val">200</span>题终极题库：<span class="val">98%</span>准确率，深挖潜意识隐藏人格</div>
      </div>
    </div>
  </PageWrapper>
</template>

<style lang="less" scoped>
.mbti-choose {
  position: relative;
  width: 100%;
  height: 100%;

  background-size: cover;
  background-position: center top;

  // .skip {
  //   position: absolute;
  //   top: 22rpx;
  //   right: 22rpx;

  //   padding: 10rpx;

  //   color: #70058E;
  //   font-size: 40rpx;
  //   line-height: 58rpx;
  // }

  .title {
    display: block;
    width: 100%;
    padding: 468rpx 0 10rpx;

    color: #53009C;
    font-size: 48rpx;
    line-height: 57.6rpx;
    text-align: center;
    text-shadow: 0 1rpx 2.7rpx rgba(153, 0, 248, .47);
  }

  .type {
    width: 586rpx;
    height: 132rpx;
    margin: 20rpx auto 0;

    background-size: 100% 100%;

    text-align: center;
    font-size: 48rpx;
    line-height: 132rpx;
  }

  .tips {
    width: 702rpx;
    // height: 188rpx;

    margin: 80rpx auto;

    padding: 26rpx 0;

    color: #666;
    font-size: 24rpx;
    line-height: 34rpx;
    text-align: center;

    .val {
      margin: 0 6rpx;
      color: #7A0FDD;
    }
  }
}
</style>